<template>
	<view class="message_styles">
		
		<!-- tabs -->
		<view class="message_tabs">
			<uni-segmented-control :current="current" @clickItem="onClickMenus" :values="menuItems" styleType="text" activeColor="#F15F35">
			</uni-segmented-control>
		</view>
		
		<!-- 内容 -->
		<view class="message_main">
			<view v-show="current === 0">
				<CommentsItem v-for="item in commentsList" :item="item"/>
			</view>
			<view v-show="current === 1">
				<CollectionItem v-for="item in collectionList" :item="item"/>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import CommentsItem from '@/components/CommentsItem.vue'
	import CollectionItem from '@/components/CollectionItem.vue'
	export default {
		components:{CommentsItem, CollectionItem},
		data() {
			return {
				menuItems: ["评论和回复", "赞和收藏"],
				current: 0,
				commentsList: [
					{ icon: "../static/logo.png", name: "梓呀紫", comments: "这是一个很不错的测试题，内容参考了大量文献，有相关科学依据，每一道题都是精心设计的，赞！", isReply: false, image: "../static/logo.png", date: "10-23 14:43" },
					{ icon: "../static/logo.png", name: "梓呀紫", reply: "啊吧啊吧啊吧！", isReply: true, comments: "可以根据一些生活中的真人真事来改编，这样能够让孩子有很强的代入感", image: "../static/logo.png", date: "10-23 14:43" },
					{ icon: "../static/logo.png", name: "梓呀紫", reply: "啊吧啊吧啊吧！", isReply: true, comments: "可以根据一些生活中的真人真事来改编，这样能够让孩子有很强的代入感", imagetext: "可以根据一些生活中的真人真事来改编，这样能够让孩子有很强的代入感g", date: "10-23 14:43" },
				],
				collectionList: [
					{ icon: "../static/logo.png", isLike: true, name: "梓呀紫", image: "../static/logo.png", date: "10-23 14:43" },
					{ icon: "../static/logo.png", isunLike: true, name: "梓呀紫", image: "../static/logo.png", date: "10-23 14:43" },
				]
			}
		},
		methods: {
			onClickMenus: function(item) {
				this.current = item.currentIndex
			},
		}
	}
</script>

<style>
	
	.message_styles {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	
	.message_tabs {
		width: 60%;
		height: 100rpx;
		margin: auto;
	}
	
	.message_main {
		width: 100%;
	}

</style>
